<template>
  <div class="instruction-template flex flex-column" style="width: 100%; height: 100%">
    <antd-form
      ref="formRef"
      class="flex-fixed"
      :options="formOptions"
      :formButtons="{ fixRight: false }"
      @submit="(params) => $refs.tableRef.load(params)"
    />
    <a-space style="margin-bottom: 14px">
      <a-button type="primary" @click="add">新增</a-button>
    </a-space>
    <antd-table
      class="flex-auto-height"
      ref="tableRef"
      :api="getTableDataAsync"
      :immediate="false"
      :index-show="false"
      :columns="columns"
      :rowKey="'id'"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :customRow="
        (record) => {
          return { onClick: onRowClick };
        }
      "
    >
      <template #action="{ scope }">
        <a-space>
          <a-button type="text" style="padding: 0; color: #1890ff" @click="edit(scope)">修改</a-button>
          <a-button danger type="text" style="padding: 0" @click="del(scope)">删除</a-button>
        </a-space>
      </template>
    </antd-table>
  </div>
</template>

<script>
import AntdForm from '@gis/lib/components/antd-form/index.js';
import AntdTable from '../antd-table/index.vue';
import find from 'lodash-es/find.js';
import get from 'lodash-es/get.js';
import { Modal } from 'ant-design-vue';
import { handleFormResult } from '@gis/lib/utils/resolver.js';
import { openInstructionTemplateAddEditDialog } from '../../dialog.js';
import { getInstructionTemplatePage, delInstructionTemplate } from '@gis/lib/api';

export default {
  name: 'instruction-template',
  components: { AntdForm, AntdTable },
  emits: ['update:modelValue', 'change'],
  data() {
    return {
      formOptions: [
        {
          component: 'a-input',
          field: 'zlmc',
          label: '关键字',
        },
      ],
      columns: [
        { title: '指令模板名称', dataIndex: 'zlmc', width: 300 },
        { title: '指令级别', dataIndex: 'zljb', width: 100 },
        { title: '签收单位', dataIndex: 'dwmc' },
        { title: '操作', dataIndex: 'action', fixed: 'none', width: 130, scopedSlots: { customRender: 'action' } },
      ],
      selectedRowKeys: [],
    };
  },
  mounted() {
    this.$refs.formRef.submit();
  },
  methods: {
    output() {
      const value = get(this.selectedRowKeys, '[0]');
      const data = this.getDataById(value);
      this.$emit('update:modelValue', value);
      this.$emit('change', { value, data });
    },
    onOk() {
      this.output();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys.slice(-1);
      // this.output();
    },
    onRowClick(e) {
      const id = e.currentTarget.getAttribute('data-row-key');
      this.selectedRowKeys = [id];
      // this.output();
    },
    getDataById(id) {
      if (!id) {
        id = get(this.selectedRowKeys, '[0]');
      }
      const dataList = get(this.$refs.tableRef, 'tableData') || [];
      return find(dataList, (item) => item.id === id);
    },
    async add(scope) {
      await openInstructionTemplateAddEditDialog({ data: null });
      this.$refs.tableRef.reload();
    },
    async edit(scope) {
      await openInstructionTemplateAddEditDialog({ data: scope });
      this.$refs.tableRef.reload();
    },
    async del(scope) {
      Modal.confirm({
        title: '提示',
        content: '确认删除该模板吗？',
        onOk: async () =>
          handleFormResult(await delInstructionTemplate({ id: get(scope, 'id') }), {
            onOk: () => this.$refs.tableRef.reload(),
          }),
      });
    },
    async getTableDataAsync(params) {
      return this.handleTableResult(await getInstructionTemplatePage(params));
    },
  },
};
</script>

<style scoped></style>
